	 $('head').append('<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css" type="text/css" />');
	$('head').append('<link rel="stylesheet" href="http://ftvi.googlecode.com/git/foot/compo.css" type="text/css" />');
	
	$('#rightColumn').remove();
	$('#middleColumn').css('width', '928px');
	$('#middleColumn').css('marginRight', '0');
	$('.container').css('background', 'url("http://www.francetv.fr/info/skin/www/img/bg/bg_main2.gif") 0 0 repeat-y');
	
	var joueurs = [
						'Cédric Carrasso',
						'Hugo Lloris',
						'Steve Mandanda',
						'Gaël Clichy',
						'Mathieu Debuchy',
						'Patrice Evra',
						'Laurent Koscielny',
						'Philippe Mexès',
						'Adil Rami',
						'Anthony Réveillère',
						'Yohan Cabaye',
						'Alou Diarra',
						'Florent Malouda',
						'Marvin Martin',
						'Blaise Matuidi',
						'Yann Mvila',
						'Samir Nasri',
						'Hatem Ben Arfa',
						'Karim Benzema',
						'Olivier Giroud',
						'Jérémy Ménez',
						'Franck Ribéry',
						'Mathieu Valbuena'
					];
						
	var postes = [
						'Gardien',
						'Latéral droit',
						'Défenseur central gauche',
						'Défenseur central défensif',
						'Latéral gauche',
						'Milieu latéral gauche',
						'Milieu défensif',
						'Milieu latéral droit',
						'Milieu offensif gauche',							
						'Milieu offensif droit',
						'Avant centre'
					];
					
	function urlFriendly(str) {
		return str
		.toLowerCase()
		.replace(/^\s+|\s+$/g, "")
		.replace(/[_|\s]+/g, "-")
		.replace(/[^a-z0-9-]+/g, "")
		.replace(/[-]+/g, "-")
		.replace(/^-+|-+$/g, "");
	}
	
	function check() {
		var ok = true;
		if ($('.dropzone3').children('ul').children('li').size() == 0) { ok = false; }
		$('.dropzone').each(function() {
			if ($(this).children('ul').children('li').size() == 0) {
				ok = false;
			}
		});
		return ok;
	}
	
	function saveValeur() {
		$('#str_share').attr('value', '');
		$('.ui-droppable').each(function() {
			var div_id = $(this).attr('id');
			for (var cpt = 0 ; cpt < postes.length ; cpt ++) {
				if (('dropzone_' + urlFriendly(postes[cpt])) == div_id) {
					if ($(this).children('ul').children('li').size() != 0) {
						$('#str_share').attr('value', $('#str_share').attr('value') + '-' + $(this).children('ul').children('li').attr('id'));
					}
				}	
			}
		});
		if ($('#str_share').attr('value').substr(0, 1) == '-') {
			$('#str_share').attr('value', $('#str_share').attr('value').substr(1, $('#str_share').attr('value').length - 1));
		}
	}
	
	function shareFacebook() {
		if (check()) {
			// Enregistrement de la valeur
			saveValeur();
			// Popup de partage
			var width = 650;
			var height = 430;
			var pos_x = 0;
			var pos_y = 0;
			var options = '';
			pos_x = ($(window).width() - width) / 2;
			pos_y = ($(window).height() - height) / 2;
			options = 'width=' + width + ',height=' + height + ',top=' + pos_y + ',left=' + pos_x + ',location=no,resizable=yes,status=no,titlebar=no,toolbar=no';
			var url_page = window.location.href;
			if (url_page.substr(url_page.length - 1, 1) == '#') {			
				url_page = url_page.substr(0, url_page.length - 1);
			}
			
			url_page += '#' + $('#str_share').attr('value');
			var url = 'https://www.facebook.com/sharer.php?u=' + encodeURIComponent(url_page) + '&t=' + encodeURIComponent('toi aussi, fait ton gouvernement');
			window.open(url, 'partage_facebook', options);
		} else {
			alert('Votre sélection n\'est pas complète.');
		}
	}
	
	function shareTwitter() {
		if (check()) {
			// Enregistrement de la valeur
			saveValeur();			
			// Popup de partage
			var width = 650;
			var height = 430;
			var pos_x = 0;
			var pos_y = 0;
			var options = '';
			pos_x = ($(window).width() - width) / 2;
			pos_y = ($(window).height() - height) / 2;
			options = 'width=' + width + ',height=' + height + ',top=' + pos_y + ',left=' + pos_x + ',location=no,resizable=yes,status=no,titlebar=no,toolbar=no';
			var title = 'Ma compo pour le match, REP A SA Laurent Blanc #euro2012';
			var url_page = window.location.href;
			if (url_page.substr(url_page.length - 1, 1) == '#') {			
				url_page = url_page.substr(0, url_page.length - 1);
			}
			url_page += '#' + $('#str_share').attr('value');
			var url = 'http://twitter.com/share?related=francetvinfo&via=francetvinfo&lang=fr&text=' + encodeURIComponent(title) + '&url=' + encodeURIComponent(url_page);
			window.open(url, 'partage_twitter', options);
		} else {
			alert('Votre sélection n\'est pas complète.');
		}
	}
	
	function raz() {
		window.location.hash = '';
		window.location.href = window.location.href;
		window.location.reload();
	}
	
	function generateIhm() {
		var code_html = '';
		
		/**
		 ** Génération des container
		 **/
		code_html += '<input type="hidden" id="str_share" value="" />';
		code_html += '<div class="demo ui-widget ui-helper-clearfix">';
		code_html += '    <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"></ul>';
		code_html += '    <div id="container"></div>';
		code_html += '</div>';
		$(code_html).appendTo($('#fais_ton_equipe'));
		
		/**
		 ** Génération des joueurs
		 **/
		code_html = '';
		for (var cpt = 0 ; cpt < joueurs.length ; cpt ++) {
			code_html += '<li id="' + cpt + '" class="ui-widget-content ui-corner-tr">';
			code_html += '    <h5 class="ui-widget-header">' + (joueurs[cpt]).replace(' ', '<br />') + '</h5>';
			code_html += '    <img src="http://ftvi.googlecode.com/git/foot/' + urlFriendly(joueurs[cpt]) + '.jpg"  alt="' + joueurs[cpt] + '" width="70" height="70" />';
			code_html += '</li>';
		}
		$(code_html).appendTo($('#gallery'));
		
		/**
		 ** Génération des postes
		 **/
		code_html = '';
		for (cpt = 0 ; cpt < postes.length ; cpt ++) {
			if (!cpt) {
				code_html += '<div id="premier_ministre">';
				code_html += '    <div id="dropzone_' + urlFriendly(postes[cpt]) + '" class="dropzone3">';
				code_html += '        <h4 class="ui-widget-header">' + postes[cpt] + '</h4>';
				code_html += '    </div>';
				code_html += '</div>';
			} else {
				code_html += '<div id="dropzone_' + urlFriendly(postes[cpt]) + '" class="dropzone">';
				code_html += '   <h4 class="ui-widget-header">' + postes[cpt] + '</h4>';
				code_html += '</div>';
			}
		}
		$(code_html).appendTo($('#container'));
		
		/**
		 ** Bouton de partage
		 **/
		code_html = '';
		code_html += '<div style="clear: both;"></div>';
		code_html += '<div class="share">';
		code_html += '   <img src="http://ftvi.googlecode.com/files/share_facebook.jpg" id="share_facebook" />';
		code_html += '   <img src="http://ftvi.googlecode.com/files/share_twitter.jpg" id="share_twitter" />';
		code_html += '   <img src="http://ftvi.googlecode.com/files/zero.jpg" id="raz" />';
		code_html += '</div>';
		$(code_html).appendTo($('#container'));
		
		$('#share_facebook').click(function() {	shareFacebook(); });
		$('#share_twitter').click(function() { shareTwitter(); });
		$('#raz').click(function() { raz(); });
	}
			
	/** Execution au démarrage **/
	$(function() {
		/**
		 ** On kill le HTML de la page pour passer en 928px
		 **/
		$('#rightColumn').remove();
		$('#middleColumn').css('width', '928px');
		$('.container').css('background', 'url("http://www.francetv.fr/info/skin/www/img/bg/bg_main2.gif") 0 0 repeat-y');
		$('#middleColumn').css('marginRight', '0');
		
		/**
		 ** On génère la grille de joueurss et ministères
		 **/
		generateIhm();
		
		/**
		 ** On est sur une visualisaiton
		 **/
		var hash = (window.location.hash.substring(1)).split('&');
        if (hash != '') {
			hash = ('' + hash).split('-');			
			for (cpt = 0 ; cpt < postes.length ; cpt ++) {
				deposeImage($('#dropzone_' + urlFriendly(postes[cpt])), $('#' + hash[cpt]));
			}
			// On centre le résultat
			$('#gallery').remove();
			$('#container').css('float', 'none');
			$('#container').css('margin', '0 auto');
			$('#container').css('backgroundColor', '#fff');
			
			// Affiche btn "A toi de jouer"
			$('.share').remove();
			var code_html = '';
			code_html += '<div class="share">';
			code_html += '   <img src="http://ftvi.googlecode.com/git/foot/images/compoz.jpg" id="composer" />';
			code_html += '</div>';
			$(code_html).appendTo($('#container'));
			$('#composer').click(function() { raz(); });
		}
		
		/**
		 ** Drag & Drop
		 **/
		var $gallery = $("#gallery");

		$( "li", $gallery ).draggable({
			cancel: "a.ui-icon", 
			revert: "invalid", 
			containment: $( "#demo-frame" ).length ? "#demo-frame" : "document", 
			helper: "clone",
			cursor: "move"
		});
		
		$('.dropzone3').droppable({
			accept: "#gallery > li",
			activeClass: "ui-state-highlight",
			drop: function( event, ui ) {
				deposeImage($(this), ui.draggable);
			}
		});		
		
		$('.dropzone').each(function() {
		   $(this).droppable({
				accept: "#gallery > li",
				activeClass: "ui-state-highlight",
				drop: function( event, ui ) {
					deposeImage($(this), ui.draggable);
				}
			});
		});
			
		$gallery.droppable({
			accept: "#container li",
			activeClass: "custom-state-active",
			drop: function( event, ui ) {
				retireImage(ui.draggable );
			}
		});
		
		var recycle_icon = "";
		function deposeImage($node, $item) {
			if ($node.children('ul').children('li').size() != 0) {
				$node.children('ul').children('li').appendTo($gallery);
				$node.children('ul').children().remove();
			}
			$item.fadeOut(function() {
				var $list = $( "ul",  $node).length ?
					$( "ul", $node ) :
					$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $node );
				$item.find( "a.ui-icon-trash" ).remove();
				$item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
				});
			});
		}

		var trash_icon = "";
		function retireImage($item) {
			$item.fadeOut(function() {
				$item
					.find( "a.ui-icon-refresh" )
						.remove()
					.end()
					.css( "width", "70px")
					.append( trash_icon )
					.find( "img" )
						.css( "height", "70px" )
					.end()
					.appendTo( $gallery )
					.fadeIn();
			});
		}
	});